<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head"></head>
<link rel="stylesheet" type="text/css" href="/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css">
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <th:block th:replace="common/header"></th:block>
    <th:block th:replace="common/nav"></th:block>

    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                系统管理
                <small>角色管理</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">角色管理</a></li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title hidden-xs">角色信息列表</h3>
                            <br/>
                            <div class="box-tools">
                                <form action="list" method="get" id="searchForm">
                                    <input type="hidden" id="nowpage" name="nowpage" value="1" />

                                    <div class="input-group" style="width: 250px;">
                                        <input type="text" name="keyword" th:value="${page.keyword}" class="form-control input-sm pull-right" placeholder="角色名称">
                                        <div class="input-group-btn">
                                            <button class="btn btn-sm btn-default" type="submit"><i class="fa fa-search"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- /.box-header -->
                        <div class="mailbox-controls">
                            <!-- Check all button -->
                            <a href="forward?mode=0" type="button" class="btn btn-success">新增</a>
                            <!-- <a href="/account/updateAllPassword" class="btn btn-danger" type="button">全部重置密码</a>-->
                        </div>
                        <div class="box-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>角色名称</th>
                                    <th>描述</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <th:block th:each="e,index:${page.allentities}">
                                <tr>
                                    <td>
                                        <span th:text="(${page.nowpage-1})*25+${index.index+1}"></span>
                                    </td>
                                    <td>
                                        <span th:text="${e.get('roleName')}"></span>
                                    </td>
                                    <td>
                                        <span th:text="${e.get('remark')}"></span>
                                    </td>
                                    <td>
                                        <span th:text="${e.get('createTime')}"></span>
                                    </td>
                                    <td>
                                        <a th:href="'forward?roleId=' + ${e.roleId} + '&mode=1'" class="btn btn-success">编辑</a>
                                        <a href="javascript:void(0);" class="btn btn-success" th:onclick="'openRoleSetting('+${e.roleId}+', this)'"> 绑定菜单</a>
                                        <a href="javascript:void(0);" class="btn btn-success" th:onclick="'openUserRoleSetting('+${e.roleId}+', this)'"> 配置帐号</a>
                                        <button type="button" class="btn btn-danger" data-toggle="modal" th:data-target="'#Modal'+${e.roleId}">
                                            删除
                                        </button>
                                        <div class="modal fade" th:id="'Modal'+${e.roleId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title">删除操作</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>你确定删除该角色信息:<span th:text=" ${e.get('roleName')}">  </span></p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                        <a th:href="'deleteRole?roleId='+${e.roleId}" type="button" class="btn btn-primary">确认</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                </th:block>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th>序号</th>
                                    <th>角色名称</th>
                                    <th>描述</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <th:block th:replace="common/page"></th:block>
                        <script type="text/javascript">
                            function jumpPage(pageno) {
                                if(pageno<1) {
                                    alert('请输入正整数');
                                } else {
                                    $('#nowpage').val(pageno);
                                    $('#searchForm').submit();
                                }
                            }
                        </script>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
    </div>

    <th:block th:replace="common/footer"></th:block>
</div>

<div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-labelledby="settingModalLabel">
    <input type="hidden" id="roleId2" name="roleId">
     <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header" style="height: 50px;">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
       <h4 class="modal-title pull-left" id="settingModalLabel">权限设置</h4>
      </div>
      <div class="modal-body">
       <div class="content_wrap" style="margin: -45px 20px;">
    <div style="height:350px; overflow-y: scroll;">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
       <a type="javascript:void(0);" onclick="checkZTree();" class="btn btn-primary" data-dismiss="modal">提交</a>
      </div>
      </div>
     </div>
</div>


<div class="modal fade" id="settingUserModal" tabindex="-1" role="dialog" aria-labelledby="settingUserModalLabel">
    <input type="hidden" id="roleId" name="roleId">
     <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header" style="height: 50px;">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
       <h4 class="modal-title pull-left" id="settingUserModalLabel">配置帐号</h4>
      </div>
      <div class="modal-body">
       <div class="content_wrap" style="margin: -45px 20px;">
    <div style="height:350px; overflow-y: scroll;">
        <ul id="userTree" class="ztree"></ul>
    </div>
</div>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
       <a type="javascript:void(0);" onclick="submitUserRole()" class="btn btn-primary" data-dismiss="modal">提交</a>
      </div>
      </div>
     </div>
</div>

<th:block th:replace="common/script"></th:block>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
    function remove_(id, obj) {
        var r=confirm("确认要删除吗？")
        if (r==true) {
            window.location.href = "/xsRole/deleteRole?roleId="+id;
        }
    }

    var zTreeObj;
    var setting = {
        view: {
            selectedMulti: true, //设置是否能够同时选中多个节点
            showIcon: true, //设置是否显示节点图标
            showLine: true, //设置是否显示节点与节点之间的连线
            showTitle: true, //设置是否显示节点的title提示信息
        },
           // data: {
           //     simpleData: {
           //         enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
           //         idKey: "userId", //设置启用简单数据格式时id对应的属性名称
           //         pIdKey: "pid" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
           //     }
           // },
        check:{
            enable: true  //设置是否显示checkbox复选框
        }
    }; // zTree 的参数配置，后面详解

    function openRoleSetting(roleId) {
        $('#settingModal').modal();
        $("#roleId").val(roleId);
        $.ajax({
            type: "post",
            url: "/xsMenu/getMenusByRoleId?roleId="+roleId,
            dataType : 'json',
            success: function(json){
                var zNodes = json;
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
            }
        });
    }

    function checkZTree(){
        var resourceIds='';
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true);
        for(var i=0;i<nodes.length;i++){
            if(resourceIds == ''){
                resourceIds=nodes[i].id;
            }else{
                resourceIds=resourceIds+ ","+nodes[i].id;
            }
        }
        var roleId = $("#roleId").val();
        $.ajax({
            type: "post",
            url: "/xsRole/submitRoleResource",
            data:{
                roleId:roleId,
                menuIds:resourceIds
            },
            dataType : 'json',
            success: function(data){
                if(data.code == 200){
                    alert("权限设置成功");
                    $('#settingModal').modal('hide');
                }else if(data.code == 500){
                    alert("设置权限失败");
                }
            }
        });
    }

    function openUserRoleSetting(roleId) {
        $('#settingUserModal').modal();
        $("#roleId2").val(roleId);
        $.ajax({
            type: "post",
            url: "/xsUser/selectUserByRoleId?roleId="+roleId,
            dataType : 'json',
            success: function(json){
                var zNodes = json;
                zTreeObj = $.fn.zTree.init($("#userTree"), setting, zNodes); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
            }
        });
    }

    function submitUserRole(){
        var userIds='';
        var treeObj=$.fn.zTree.getZTreeObj("userTree"),
            nodes=treeObj.getCheckedNodes(true);
        for(var i=0;i<nodes.length;i++){
            if(userIds == ''){
                userIds=nodes[i].id;
            }else{
                userIds=userIds+ ","+nodes[i].id ;
            }
        }
        var roleId = $("#roleId2").val();
        $.ajax({
            type: "post",
            url: "/xsRole/submitUserRole",
            data:{
                roleId:roleId,
                userIds:userIds
            },
            dataType : 'json',
            success: function(data){
                if(data.code == 200){
                    alert("配置成功");
                    $('#settingModal').modal('hide');
                }else if(data.code == 500){
                    alert("配置失败");
                }
            }
        });
    }
</script>
</body>
</html>
